<template>
    <div class="Order-detail">
        <div class="header">
            <h1>我的订单</h1>
        </div>

        <!-- 标签页和时间选择在同一行 -->
        <el-table :data="tableData" height="670" class="custom-table" :border="false"
            v-el-table-infinite-scroll="loadData" v-loading="loading" element-loading-text="加载中..."
            element-loading-background="rgba(0, 0, 0, 0.8)" empty-text="暂无订单">
            <el-table-column prop="orderNo" label="订单编号"></el-table-column>
            <el-table-column prop="name" label="名称" width="130"></el-table-column>
            <el-table-column prop="paymentTime" label="支付时间" width="200"></el-table-column>
            <el-table-column prop="planCoin" label="实付款" width="100"></el-table-column>
            <el-table-column prop="expirationDesc" label="有效期" width="120"></el-table-column>
            <el-table-column prop="payMethod" align="left" label="支付方式" width="100">
                <template #default="scope">
                    <span class="cloud-bean-value">{{ scope.row.payMethod }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="支付状态" width="100" align="right">
                <template #default="scope">
                    <span class="cloud-bean-value" style="color: #fff;">{{ statusText(scope.row.status) }}</span>
                </template>
            </el-table-column>


            <template #empty>
                <div class="custom-empty">
                    <img src="@/assets/images/userCenter/empty.png" alt="">
                </div>
            </template>
        </el-table>
    </div>
</template>

<script setup>
defineOptions({
    name: 'MyOrder'
})
import { ref, onMounted } from 'vue';
import { getOrderList } from '@/api/user';

// 表格数据
const tableData = ref([]);
const loading = ref(false);
const PageIndex = ref(1);
const hasMore = ref(true);

const loadData = async () => {
    // 只有当没有在加载中且还有更多数据时才触发加载
    if (!loading.value && hasMore.value) {
        await GetOrderList();
    }
}

// 获取订单列表
const GetOrderList = async () => {
    // 如果已经没有更多数据了，直接返回
    if (!hasMore.value) return;

    loading.value = true;

    let params = {
        "page": PageIndex.value,
        "rows": 20,
        "name": "",
        "status": "paid"
    };

    try {
        const response = await getOrderList(params);
        const { orders } = response || {};
        // 处理返回的数据
        if (orders && orders.length > 0) {
            tableData.value = tableData.value.concat(orders);
            PageIndex.value++;
            // 根据返回的数据量判断是否还有更多数据
            // 如果返回的数据量小于请求的rows数量，说明已经没有更多数据了
            hasMore.value = orders.length === params.rows;
        } else {
            // 如果返回的数据为空，则没有更多数据了
            hasMore.value = false;
        }
    } catch (error) {
        console.error('获取订单列表失败:', error);
    } finally {
        // 重置loading状态
        loading.value = false;
    }
}
// 状态码转中文
const statusText = (status) => {
    switch (status) {
        case 'pending': return '待支付';
        case 'paid': return '已支付';
        case 'cancelled': return '已取消';
        case 'refunded': return '已退款';
        default: return status;
    }
}
</script>

<style scoped lang="scss">
.Order-detail {
    padding: 20px;
    box-sizing: border-box;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h1 {
            font-size: 24px;
            margin: 0;
            color: #E2E2E2;
            font: "Microsoft YaHei UI";
            font-weight: bold;
        }
    }

    /* 表格样式调整 */
    .custom-table {
        border: none !important;
        border-radius: 4px !important;
        overflow: hidden;
    }

    :deep(.el-table th.el-table__cell.is-leaf) {

        border-bottom: none !important;
    }

    :deep(.el-table) {
        --el-table-border-color: none !important;
    }

    /* 表头样式 */
    :deep(.custom-table th.el-table__cell) {
        background-color: #36393C !important;
        color: #888888 !important;
        font-weight: normal;
    }


    /* 表格内容样式 */
    :deep(.custom-table td.el-table__cell) {
        background-color: #232527 !important;
        color: #888 !important;
    }


    :deep(.el-table td, .el-table th.is-leaf) {
        border-bottom: none;
    }

    :deep(.el-table::before) {
        height: 0;
    }
}
</style>